<template>
	<!-- 采购清单，添加采购合同时，提供采购清单列表 -->
	<view class="procure-list-box">
		<view class="top-pane" v-if="flag==0">
			<view style="padding: 0 10px 10px 10px;color: #0055ff;display: flex;justify-content: space-between;">
				<view @click="back">
					<uni-icons type="left" size="12" color="#0055ff"></uni-icons>上一步
				</view>
				<view @click="next">下一步<uni-icons type="right" size="12" color="#0055ff"></uni-icons>
				</view>
			</view>
			<button class="btn" @click="toAddProcureList">新增采购清单</button>
		</view>
		<view class="procure-list" :style="flag==1?'padding-top: 46px':''">
			<view class="item" v-for="procureList in procureListEntities">
				<view class="line-item">
					<view class="title-type">{{procureList.typeName}}</view>
					<view class="spear">/</view>
					<view class="product-name">{{procureList.productName}}</view>
				</view>
				<view class="line-item">
					<view class="specifications">{{procureList.specifications}}</view>
					<view class="spear">/</view>
					<view class="material">{{procureList.material}}</view>
				</view>
				<view class="line-item">
					<view class="unitWeight">{{procureList.unitWeight}}</view>
					<view class="spear">/</view>
					<view class="totalWeight">{{procureList.totalWeight}}</view>
				</view>
				<view class="line-item">
					<view class="number">{{procureList.number}}</view>
					<view class="spear">/</view>
					<view class="price">{{procureList.price}}</view>
					<view class="spear">/</view>
					<view class="totalPrice">{{procureList.totalPrice}}</view>
				</view>
				<view class="line-item">
					<view class="manufacturerStandard">{{procureList.manufacturerStandard}}</view>
					<view class="spear">/</view>
					<view class="drawNumber">{{procureList.drawNumber}}</view>
				</view>
				<view class='createTime'>
					<view>
						<text class="iconfont icon-rili"></text>创建时间：
						<uni-dateformat :date="procureList.createTime" format='yyyy-MM-dd hh:mm:ss'></uni-dateformat>
					</view>
					<view>
						<uni-tooltip placement="top">
							<view>更多</view>
							<template slot="content">
								<a @click="deleteSingle(procureList)">删除</a>&nbsp;/&nbsp;<a
									@click="updateSingle(procureList)">编辑</a>
							</template>
						</uni-tooltip>
					</view>
				</view>
			</view>
		</view>
		<view class="add-procure-list">
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content">
					<view class="add-form-box">
						<view class="form-item">
							<view class="title">材料分类</view>
							<view style="display: flex;align-items: center;" @click="loadModal">
								<input class="uni-input" placeholder="材料分类" v-model="partTypeName" disabled />
								<uni-icons type="right" size="16" style="color: #666;"></uni-icons>
							</view>
						</view>
						<view class="form-item">
							<view class="title">名称</view>
							<input class="uni-input" placeholder="名称" v-model="procureListEntity.productName" />
						</view>
						<view class="form-item">
							<view class="title">规格</view>
							<input class="uni-input" placeholder="材质" v-model="procureListEntity.specifications" />
						</view>
						<view class="form-item">
							<view class="title">材质</view>
							<input class="uni-input" placeholder="材质" v-model="procureListEntity.material" />
						</view>
						<view class="form-item">
							<view class="title">图号</view>
							<input class="uni-input" placeholder="图号" v-model="procureListEntity.drawNumber" />
						</view>
						<view class="form-item">
							<view class="title">制造标准</view>
							<input class="uni-input" placeholder="制造标准"
								v-model="procureListEntity.manufacturerStandard" />
						</view>
						<view class="form-item">
							<view class="title">数量</view>
							<input class="uni-input" placeholder="数量" v-model="procureListEntity.number" />
						</view>
						<view class="form-item">
							<view class="title">单重</view>
							<input class="uni-input" placeholder="单重" v-model="procureListEntity.unitWeight" />
						</view>
						<view class="form-item">
							<view class="title">总重</view>
							<input class="uni-input" placeholder="总重" v-model="procureListEntity.totalWeight" />
						</view>
						<view class="form-item">
							<view class="title">单位</view>
							<input class="uni-input" placeholder="单位" v-model="procureListEntity.unit" />
						</view>
						<view class="form-item">
							<view class="title">单价</view>
							<input class="uni-input" placeholder="单价" v-model="procureListEntity.price" />
						</view>
						<view class="form-item">
							<view class="title">总价</view>
							<input class="uni-input" placeholder="总价" v-model="procureListEntity.totalPrice" />
						</view>
						<view class="form-radio-item">
							<view class="title">是否根据数量进行批量生产</view>
							<radio-group @change="radioChangeFlag">
								<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in flagEntities"
									:key="item.id">
									<view>
										<radio :value="item.id" color="#3f8cf7" :checked="index === currentFlag"
											style="transform: scale(0.7)" />
									</view>
									<view>{{ item.label }}</view>
								</label>
							</radio-group>
						</view>
						<view class="form-item" style="border-bottom: none;">
							<view class="title">备注</view>
							<input class="uni-input" placeholder="备注" v-model="procureListEntity.remark" />
						</view>
						<button style="margin: 20rpx" type="primary" @click="saveProcureList">
							保存
						</button>
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- 添加零部件类型 -->
		<view class="part-type-bottom-box">
			<uni-popup ref="partType" background-color="#fff">
				<view class="popup-content">
					<view class="item" v-for="data in partTypeEntities" @click="loadPartTypeValue(data)">
						{{data.typeName}}
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		api,
		post
	} from '@/util/api.js'
	export default {
		props: {
			contractId: '', // 合同Id
			flag: 0, // 表示是否查看详情
		},
		data() {
			return {
				procureListEntities: [],
				procureListEntity: {
					partTypeId: '',
					productName: '',
					specifications: '',
					material: '',
					number: 0,
					flag: 1
				},
				flagEntities: [{
						id: '0',
						label: '否'
					},
					{
						id: '1',
						label: '是',
						checked: 'true',
					},
				],
				currentFlag: 1,
				partTypeEntities: [],
				partTypeName: '', // 选中的零部件类型名称
				id: '', // 编辑时的采购清单Id
			}
		},
		created() {
			if (this.contractId) {
				this.queryList()
			}
		},
		methods: {
			// 上一步，到采购合同基本信息
			back() {
				uni.$emit('changeTab', 0)
			},
			// 下一步，到采购合同附件清单
			next() {
				uni.$emit('changeTab', 2)
			},
			queryList() {
				post(api.ProcureListEntities, {
					contractId: this.contractId
				}).then(res => {
					this.procureListEntities = res.data
				})
			},
			toAddProcureList() {
				this.$refs.popup.open('bottom')
			},
			loadModal() {
				post(api.PartEntities, {}).then(res => {
					this.partTypeEntities = res.data
				})
				this.$refs.partType.open('bottom')
			},
			loadPartTypeValue(partType) {
				this.partTypeName = partType.typeName
				this.procureListEntity.partTypeId = partType.id
				this.$refs.partType.close()
			},
			radioChangeFlag: function(evt) {
				for (let i = 0; i < this.flagEntities.length; i++) {
					if (this.flagEntities[i].id == evt.detail.value) {
						this.procureListEntity.flag = i
						break
					}
				}
			},
			// 删除采购清单
			deleteSingle(procureList) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '你确定要删除吗',
					success: function(res) {
						if (res.confirm) {
							post(api.DeleteProcureList, {
								id: procureList.id
							}).then(res => {
								that.procureListEntities = []
								that.queryList()
							})
						} else if (res.cancel) {
							console.log('取消');
						}
					}
				});
			},
			//修改采购清单
			async updateSingle(procureList) {
				this.id = procureList.id
				let result = await post(api.ProcureListSingle, {
					id: procureList.id
				})
				this.procureListEntity = result.data
				this.currentFlag = result.data.flag
				// 材料分类
				if (result.data.partTypeId) {
					post(api.PartTypeSingle, {id: result.data.partTypeId}).then(res => {
						this.partTypeName = res.data.typeName
					})
				}
				this.$refs.popup.open('bottom')
			},
			// 保存采购清单
			saveProcureList() {
				if (this.procureListEntity.partTypeId == '') {
					return uni.showToast({
						icon: 'none',
						title: '材料分类不能为空'
					})
				}
				if (this.procureListEntity.productName == '') {
					return uni.showToast({
						icon: 'none',
						title: '名称不能为空'
					})
				}
				if (this.procureListEntity.specifications == '') {
					return uni.showToast({
						icon: 'none',
						title: '规格不能为空'
					})
				}
				if (this.procureListEntity.material == '') {
					return uni.showToast({
						icon: 'none',
						title: '材质不能为空'
					})
				}
				if (this.procureListEntity.number == '' || this.procureListEntity.number == 0) {
					return uni.showToast({
						icon: 'none',
						title: '数量不能为空'
					})
				}
				this.procureListEntity.contractId = this.contractId
				let url = this.id ? api.UpdateProcureList : api.SaveProcureSingle
				post(url, this.procureListEntity).then(res => {
					this.$refs.popup.close()
					this.procureListEntities = []
					this.queryList()
				})
			}
		}
	}
</script>

<style>
	@import '@/static/css/ProcureList.css';
</style>